<template>
	<div class="subsidy-rule card-fill layout-padding" v-loading="loading" element-loading-text="Loading...">
		<el-card shadow="hover" class="layout-padding-auto create-form">
			<el-form ref="formRef" :model="stateData.vmModel" label-width="auto">
				<!-- 基本信息 -->
				<div class="form-section">
					<div class="section-title">
						<i class="el-icon-info"></i>
						<span>基本信息</span>
					</div>

					<el-row :gutter="20">
						<el-col :xs="24" :lg="12" class="mb20">
							<el-form-item ref="Entity_Name_FormItem" prop="Entity.Name" :rules="[{ required: true, message: '规则名称为必填项', trigger: 'blur' }]">
								<template #label>
									<WtmLabelTooltip label="规则名称" tooltip="补贴规则的显示名称" />
								</template>
								<el-input v-model="stateData.vmModel.Entity.Name" clearable placeholder="请输入规则名称" class="width100"></el-input>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :lg="12" class="mb20">
							<el-form-item
								ref="Entity_RuleType_FormItem"
								prop="Entity.RuleType"
								:rules="[{ required: true, message: '规则类型为必填项', trigger: 'blur' }]"
							>
								<template #label>
									<WtmLabelTooltip label="规则类型" tooltip="补贴的类型分类" />
								</template>
								<el-select v-model="stateData.vmModel.Entity.RuleType" clearable placeholder="请选择规则类型" class="width100">
									<el-option key="餐补" value="餐补" label="餐补"></el-option>
									<el-option key="交通补贴" value="交通补贴" label="交通补贴"></el-option>
									<el-option key="加班补贴" value="加班补贴" label="加班补贴"></el-option>
									<el-option key="夜班补贴" value="夜班补贴" label="夜班补贴"></el-option>
									<el-option key="节假日补贴" value="节假日补贴" label="节假日补贴"></el-option>
									<el-option key="其他补贴" value="其他补贴" label="其他补贴"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :lg="12" class="mb20">
							<el-form-item
								ref="Entity_EffectiveStartDate_FormItem"
								prop="Entity.EffectiveStartDate"
								:rules="[{ required: true, message: '开始日期为必填项', trigger: 'blur' }]"
							>
								<template #label>
									<WtmLabelTooltip label="开始日期" tooltip="规则开始生效的日期" />
								</template>
								<el-date-picker
									v-model="stateData.vmModel.Entity.EffectiveStartDate"
									clearable
									placeholder="请选择开始日期"
									class="width100"
								></el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :lg="12" class="mb20">
							<el-form-item ref="Entity_EffectiveEndDate_FormItem" prop="Entity.EffectiveEndDate">
								<template #label>
									<WtmLabelTooltip label="结束日期" tooltip="规则结束生效的日期，为空表示长期有效" />
								</template>
								<el-date-picker
									v-model="stateData.vmModel.Entity.EffectiveEndDate"
									clearable
									placeholder="请选择结束日期"
									class="width100"
								></el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :lg="12" class="mb20">
							<el-form-item
								ref="Entity_IsEnabled_FormItem"
								prop="Entity.IsEnabled"
								:rules="[{ required: true, message: '是否启用为必填项', trigger: 'blur' }]"
							>
								<template #label>
									<WtmLabelTooltip label="是否启用" tooltip="规则是否生效" />
								</template>
								<el-select v-model="stateData.vmModel.Entity.IsEnabled" clearable placeholder="请选择是否启用" class="width100">
									<el-option :key="1" :value="true" :label="$t('message._system.common.vm.tips_bool_true')"></el-option>
									<el-option :key="0" :value="false" :label="$t('message._system.common.vm.tips_bool_false')"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :xs="24" class="mb20">
							<el-form-item ref="Entity_Remark_FormItem" prop="Entity.Remark">
								<template #label>
									<WtmLabelTooltip label="备注" tooltip="补贴规则的备注信息" />
								</template>
								<el-input v-model="stateData.vmModel.Entity.Remark" type="textarea" :rows="3" clearable placeholder="请输入备注信息"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</div>

				<!-- 补贴计算 -->
				<div class="form-section">
					<div class="section-title">
						<i class="el-icon-coin"></i>
						<span>补贴计算</span>
					</div>

					<el-row :gutter="20">
						<el-col :xs="24" :lg="12" class="mb20">
							<el-form-item
								ref="Entity_CalculationType_FormItem"
								prop="Entity.CalculationType"
								:rules="[{ required: true, message: '计算方式为必填项', trigger: 'blur' }]"
							>
								<template #label>
									<WtmLabelTooltip label="计算方式" tooltip="补贴金额的计算方式" />
								</template>
								<el-select
									v-model="stateData.vmModel.Entity.CalculationType"
									clearable
									placeholder="请选择计算方式"
									class="width100"
									@change="onCalculationTypeChange"
								>
									<el-option key="固定金额" value="固定金额" label="固定金额"></el-option>
									<el-option key="按公式计算" value="按公式计算" label="按公式计算"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :lg="12" class="mb20" v-if="stateData.vmModel.Entity.CalculationType === '固定金额'">
							<el-form-item
								ref="Entity_FixedAmount_FormItem"
								prop="Entity.FixedAmount"
								:rules="[
									{
										required: stateData.vmModel.Entity.CalculationType === '固定金额',
										message: '固定金额为必填项',
										trigger: 'blur',
									},
									{
										validator: (rule: any, value: any, callback: any) => {
											if (stateData.vmModel.Entity.CalculationType === '固定金额' && (!value || value <= 0)) {
												callback(new Error('固定金额必须大于0'));
											} else {
												callback();
											}
										},
										trigger: 'blur',
									},
								]"
							>
								<template #label>
									<WtmLabelTooltip label="固定金额" tooltip="固定的补贴金额" />
								</template>
								<el-input-number v-model="stateData.vmModel.Entity.FixedAmount" :min="0" :precision="2" clearable class="width100"></el-input-number>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :lg="12" class="mb20" v-if="stateData.vmModel.Entity.CalculationType === '按公式计算'">
							<el-form-item
								ref="Entity_CalculationFormula_FormItem"
								prop="Entity.CalculationFormula"
								:rules="[
									{
										required: stateData.vmModel.Entity.CalculationType === '按公式计算',
										message: '计算公式为必填项',
										trigger: 'blur',
									},
									{
										validator: (rule: any, value: any, callback: any) => {
											if (stateData.vmModel.Entity.CalculationType === '按公式计算' && (!value || value.trim() === '')) {
												callback(new Error('计算公式不能为空'));
											} else {
												callback();
											}
										},
										trigger: 'blur',
									},
								]"
							>
								<template #label>
									<WtmLabelTooltip label="计算公式" tooltip="用于动态计算补贴金额的公式" />
								</template>
								<el-input
									v-model="stateData.vmModel.Entity.CalculationFormula"
									readonly
									placeholder="点击输入计算公式"
									class="width100"
									@click="openFormulaDialog"
								></el-input>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :lg="12" class="mb20">
							<el-form-item ref="Entity_MaxAmount_FormItem" prop="Entity.MaxAmount">
								<template #label>
									<WtmLabelTooltip label="上限金额" tooltip="单次补贴的最大金额限制" />
								</template>
								<el-input-number
									v-model="stateData.vmModel.Entity.MaxAmount"
									:min="0"
									:precision="2"
									clearable
									placeholder="请输入上限金额"
									class="width100"
								></el-input-number>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :lg="12" class="mb20">
							<el-form-item ref="Entity_MinAmount_FormItem" prop="Entity.MinAmount">
								<template #label>
									<WtmLabelTooltip label="下限金额" tooltip="单次补贴的最小金额限制" />
								</template>
								<el-input-number
									v-model="stateData.vmModel.Entity.MinAmount"
									:min="0"
									:precision="2"
									clearable
									placeholder="请输入下限金额"
									class="width100"
								></el-input-number>
							</el-form-item>
						</el-col>
					</el-row>
				</div>

				<!-- 适用条件 -->
				<div class="form-section">
					<div class="section-title">
						<i class="el-icon-setting"></i>
						<span>适用条件</span>
					</div>

					<!-- 条件设置容器 -->
					<div class="conditions-container">
						<!-- 出勤时间条件 -->
						<div class="condition-item" :class="{ disabled: !stateData.vmModel.Entity.AttendanceTimeConditionEnabled }">
							<div class="condition-header">
								<div class="condition-label">
									<i class="el-icon-time condition-icon"></i>
									<span>出勤时间条件</span>
								</div>
								<div class="condition-switch">
									<el-switch v-model="stateData.vmModel.Entity.AttendanceTimeConditionEnabled"></el-switch>
								</div>
							</div>
							<div class="condition-content" v-if="stateData.vmModel.Entity.AttendanceTimeConditionEnabled">
								<el-form-item
									ref="Entity_MinAttendanceHours_FormItem"
									prop="Entity.MinAttendanceHours"
									:rules="[
										{
											required: stateData.vmModel.Entity.AttendanceTimeConditionEnabled,
											message: '最小出勤时间为必填项',
											trigger: 'blur',
										},
										{
											validator: (rule: any, value: any, callback: any) => {
												if (stateData.vmModel.Entity.AttendanceTimeConditionEnabled && (!value || value <= 0)) {
													callback(new Error('最小出勤时间必须大于0'));
												} else {
													callback();
												}
											},
											trigger: 'blur',
										},
									]"
								>
									<div class="condition-row">
										<span class="condition-text">最小出勤时间</span>
										<el-input-number
											v-model="stateData.vmModel.Entity.MinAttendanceHours"
											:min="0"
											:max="24"
											:precision="1"
											class="condition-input"
										></el-input-number>
										<span class="condition-unit">小时</span>
									</div>
								</el-form-item>
							</div>
						</div>

						<!-- 签到时间条件 -->
						<div class="condition-item" :class="{ disabled: !stateData.vmModel.Entity.CheckinTimeConditionEnabled }">
							<div class="condition-header">
								<div class="condition-label">
									<i class="el-icon-right condition-icon"></i>
									<span>签到时间条件</span>
								</div>
								<div class="condition-switch">
									<el-switch v-model="stateData.vmModel.Entity.CheckinTimeConditionEnabled"></el-switch>
								</div>
							</div>
							<div class="condition-content" v-if="stateData.vmModel.Entity.CheckinTimeConditionEnabled">
								<div class="condition-row">
									<span class="condition-text">签到时间范围</span>
									<div class="time-range">
										<div class="time-selector">
											<el-form-item
												ref="Entity_CheckinStartDayOffset_FormItem"
												prop="Entity.CheckinStartDayOffset"
												:rules="[
													{
														required: stateData.vmModel.Entity.CheckinTimeConditionEnabled,
														message: '签到开始日期为必选项',
														trigger: 'change',
													},
												]"
												class="inline-form-item"
											>
												<el-select v-model="stateData.vmModel.Entity.CheckinStartDayOffset" class="day-select">
													<el-option key="当日" value="当日" label="当日"></el-option>
													<el-option key="下一日" value="下一日" label="下一日"></el-option>
													<el-option key="上一日" value="上一日" label="上一日"></el-option>
												</el-select>
											</el-form-item>
											<el-form-item
												ref="checkinStartTime_FormItem"
												prop="checkinStartTime"
												:rules="[
													{
														required: stateData.vmModel.Entity.CheckinTimeConditionEnabled,
														message: '签到开始时间为必填项',
														trigger: 'change',
													},
												]"
												class="inline-form-item"
											>
												<el-time-picker v-model="checkinStartTime" class="time-picker" placeholder="开始时间"></el-time-picker>
											</el-form-item>
										</div>
										<span class="time-separator">至</span>
										<div class="time-selector">
											<el-form-item
												ref="Entity_CheckinEndDayOffset_FormItem"
												prop="Entity.CheckinEndDayOffset"
												:rules="[
													{
														required: stateData.vmModel.Entity.CheckinTimeConditionEnabled,
														message: '签到结束日期为必选项',
														trigger: 'change',
													},
												]"
												class="inline-form-item"
											>
												<el-select v-model="stateData.vmModel.Entity.CheckinEndDayOffset" class="day-select">
													<el-option key="当日" value="当日" label="当日"></el-option>
													<el-option key="下一日" value="下一日" label="下一日"></el-option>
													<el-option key="上一日" value="上一日" label="上一日"></el-option>
												</el-select>
											</el-form-item>
											<el-form-item
												ref="checkinEndTime_FormItem"
												prop="checkinEndTime"
												:rules="[
													{
														required: stateData.vmModel.Entity.CheckinTimeConditionEnabled,
														message: '签到结束时间为必填项',
														trigger: 'change',
													},
												]"
												class="inline-form-item"
											>
												<el-time-picker v-model="checkinEndTime" class="time-picker" placeholder="结束时间"></el-time-picker>
											</el-form-item>
										</div>
									</div>
								</div>
							</div>
						</div>

						<!-- 签出时间条件 -->
						<div class="condition-item" :class="{ disabled: !stateData.vmModel.Entity.CheckoutTimeConditionEnabled }">
							<div class="condition-header">
								<div class="condition-label">
									<i class="el-icon-back condition-icon"></i>
									<span>签出时间条件</span>
								</div>
								<div class="condition-switch">
									<el-switch v-model="stateData.vmModel.Entity.CheckoutTimeConditionEnabled"></el-switch>
								</div>
							</div>
							<div class="condition-content" v-if="stateData.vmModel.Entity.CheckoutTimeConditionEnabled">
								<div class="condition-row">
									<span class="condition-text">签出时间范围</span>
									<div class="time-range">
										<div class="time-selector">
											<el-form-item
												ref="Entity_CheckoutStartDayOffset_FormItem"
												prop="Entity.CheckoutStartDayOffset"
												:rules="[
													{
														required: stateData.vmModel.Entity.CheckoutTimeConditionEnabled,
														message: '签出开始日期为必选项',
														trigger: 'change',
													},
												]"
												class="inline-form-item"
											>
												<el-select v-model="stateData.vmModel.Entity.CheckoutStartDayOffset" class="day-select">
													<el-option key="当日" value="当日" label="当日"></el-option>
													<el-option key="下一日" value="下一日" label="下一日"></el-option>
													<el-option key="上一日" value="上一日" label="上一日"></el-option>
												</el-select>
											</el-form-item>
											<el-form-item
												ref="checkoutStartTime_FormItem"
												prop="checkoutStartTime"
												:rules="[
													{
														required: stateData.vmModel.Entity.CheckoutTimeConditionEnabled,
														message: '签出开始时间为必填项',
														trigger: 'change',
													},
												]"
												class="inline-form-item"
											>
												<el-time-picker v-model="checkoutStartTime" class="time-picker" placeholder="开始时间"></el-time-picker>
											</el-form-item>
										</div>
										<span class="time-separator">至</span>
										<div class="time-selector">
											<el-form-item
												ref="Entity_CheckoutEndDayOffset_FormItem"
												prop="Entity.CheckoutEndDayOffset"
												:rules="[
													{
														required: stateData.vmModel.Entity.CheckoutTimeConditionEnabled,
														message: '签出结束日期为必选项',
														trigger: 'change',
													},
												]"
												class="inline-form-item"
											>
												<el-select v-model="stateData.vmModel.Entity.CheckoutEndDayOffset" class="day-select">
													<el-option key="当日" value="当日" label="当日"></el-option>
													<el-option key="下一日" value="下一日" label="下一日"></el-option>
													<el-option key="上一日" value="上一日" label="上一日"></el-option>
												</el-select>
											</el-form-item>
											<el-form-item
												ref="checkoutEndTime_FormItem"
												prop="checkoutEndTime"
												:rules="[
													{
														required: stateData.vmModel.Entity.CheckoutTimeConditionEnabled,
														message: '签出结束时间为必填项',
														trigger: 'change',
													},
												]"
												class="inline-form-item"
											>
												<el-time-picker v-model="checkoutEndTime" class="time-picker" placeholder="结束时间"></el-time-picker>
											</el-form-item>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</el-form>
		</el-card>

		<!-- 公式编辑器组件 -->
		<CustomAmountDialog
			v-model="formulaDialogVisible"
			:formula="stateData.vmModel.Entity.CalculationFormula || ''"
			@confirm="handleFormulaConfirm"
			@cancel="handleFormulaCancel"
		/>
	</div>
</template>

<!--suppress JSAnnotator -->
<script setup lang="ts" name="message._system.common.vm.add;false">
import ElMessage from 'element-plus/es/components/message/index';
import { reactive, ref, getCurrentInstance, onMounted, computed, nextTick, ComponentInternalInstance } from 'vue';
import { SysAttendanceSubsidyRuleApi as api } from '/@/views/hr/sysattendancesubsidyrule/api';
import other from '/@/utils/other';
import { ISysAttendanceSubsidyRuleVm } from '/@/views/hr/sysattendancesubsidyrule/api/interface';
import { IViewModel } from '/@/types/common';
import CustomAmountDialog from '/@/components/customAmountDialog/index.vue';

const BUTTON_TEXTS = {
	SAVE: '保存',
	SUBMIT: '提交',
	CLOSE: '关闭',
} as const;
const ci = getCurrentInstance() as ComponentInternalInstance;
const loading = ref(false);
const formRef = ref();
const hasSavedOnce = ref(false);

// 公式编辑器相关状态
const formulaDialogVisible = ref(false);
const stateData = reactive<IViewModel<ISysAttendanceSubsidyRuleVm>>({
	vmModel: {
		Entity: {
			Name: null,
			RuleType: '餐补',
			EffectiveStartDate: null,
			EffectiveEndDate: null,
			IsEnabled: false,
			Remark: null,
			AttendanceTimeConditionEnabled: false,
			MinAttendanceHours: null,
			CheckinTimeConditionEnabled: false,
			CheckinStartDayOffset: '当日',
			CheckinStartTime: null,
			CheckinEndDayOffset: '当日',
			CheckinEndTime: null,
			CheckoutTimeConditionEnabled: false,
			CheckoutStartDayOffset: '当日',
			CheckoutStartTime: null,
			CheckoutEndDayOffset: '当日',
			CheckoutEndTime: null,
			CalculationType: '固定金额',
			FixedAmount: null,
			CalculationFormula: null,
			MaxAmount: null,
			MinAmount: null,
			ShiftId: null,
		},
		ActionName: null,
		IsMyApprove: null,
	},
	AllSysAttendanceShifts: [],
});

const hasEntityId = computed(() => {
	const entity = stateData.vmModel.Entity as any;
	return !!(entity && entity.ID);
});
const handleApiResponse = (response: any) => {
	ElMessage.success(ci.proxy?.$t('message._system.common.vm.submittip') || '提交成功');
	emit('refresh');
	loading.value = false;
	closeDialog();
};

const handleError = (error: any) => {
	other.setFormError(ci, error);
	loading.value = false;
};

const handleApiRequest = (apiCall: () => Promise<any>, beforeSubmit: () => void, isSubmit = false) => {
	other.validateFormWithMessage(formRef.value, () => {
		loading.value = true;
		beforeSubmit();
		apiCall()
			.then((response: any) => handleApiResponse(response))
			.catch(handleError);
	});
};
// 取消
const onClose = () => {
	closeDialog();
};

// 保存
const onSave = () => {
	handleApiRequest(
		() => {
			// 创建一个深拷贝，确保新增时不发送无效的 ID 字段
			const submitData = JSON.parse(JSON.stringify(stateData.vmModel));
			if (!submitData.Entity.ID) {
				// 如果没有有效的 ID，删除该字段
				delete submitData.Entity.ID;
			}
			return api().add(submitData);
		},
		() => {},
		false
	);
};

const checkinStartTime = computed<Date | null>({
	get: () => timeSpanToDate(stateData.vmModel.Entity.CheckinStartTime),
	set: (value: Date | null) => {
		stateData.vmModel.Entity.CheckinStartTime = dateToTimeSpan(value);
	},
});

const timeSpanToDate = (timeSpan: string | null): Date | null => {
	if (!timeSpan) return null;
	const parts = timeSpan.split(':');
	if (parts.length !== 3) return null;
	const [hours, minutes, seconds] = parts;
	const date = new Date();
	date.setHours(+hours, +minutes, +seconds, 0);
	return date;
};

const dateToTimeSpan = (date: Date | null): string | null => {
	if (!date) return null;
	const hours = date.getHours().toString().padStart(2, '0');
	const minutes = date.getMinutes().toString().padStart(2, '0');
	const seconds = date.getSeconds().toString().padStart(2, '0');
	return `${hours}:${minutes}:${seconds}`;
};

// 计算方式变更事件
const onCalculationTypeChange = (value: string) => {
	if (value === '按公式计算') {
		// 当选择按公式计算时，自动打开公式编辑器
		openFormulaDialog();
	}
};

// 公式编辑器方法
const openFormulaDialog = () => {
	formulaDialogVisible.value = true;
};

const handleFormulaConfirm = (formula: string) => {
	stateData.vmModel.Entity.CalculationFormula = formula;
};

const handleFormulaCancel = () => {
	// 取消时不做任何操作
};

const checkinEndTime = computed<Date | null>({
	get: () => timeSpanToDate(stateData.vmModel.Entity.CheckinEndTime),
	set: (value: Date | null) => {
		stateData.vmModel.Entity.CheckinEndTime = dateToTimeSpan(value);
	},
});

const checkoutStartTime = computed<Date | null>({
	get: () => timeSpanToDate(stateData.vmModel.Entity.CheckoutStartTime),
	set: (value: Date | null) => {
		stateData.vmModel.Entity.CheckoutStartTime = dateToTimeSpan(value);
	},
});

const checkoutEndTime = computed<Date | null>({
	get: () => timeSpanToDate(stateData.vmModel.Entity.CheckoutEndTime),
	set: (value: Date | null) => {
		stateData.vmModel.Entity.CheckoutEndTime = dateToTimeSpan(value);
	},
});

// 加载选择列表数据
const loadData = async () => {
	await Promise.allSettled([
		other.getSelectList('/api/SysAttendanceSubsidyRule/GetSysAttendanceShifts', [], false).then((x) => (stateData.AllSysAttendanceShifts = x)),
	]);
};

const initializePageData = () => {
	const wtmdata = ci.attrs['wtmdata'] as any;
	// 接收从班次主表传递过来的ID
	if (wtmdata?.ID) {
		// 设置ShiftId为主表ID，用于绑定主子表关系
		stateData.vmModel.Entity.ShiftId = wtmdata.ID;
		// 注意：这里不应该设置hasSavedOnce为true，因为这是新增操作
		// hasSavedOnce.value = true; // 移除这行
	}
};
// 页面加载时
onMounted(async () => {
	loading.value = true;
	initializePageData();

	try {
		// 并行加载选择列表数据
		await loadData();
	} catch (error) {
		other.setFormError(ci, error);
	} finally {
		loading.value = false;
		nextTick(() => {
			setupHeaderButtons();
		});
	}
});

// 定义子组件向父组件传值事件
const emit = defineEmits(['refresh', 'closeDialog', 'updateHeaderButtons']);

// 关闭弹窗
const closeDialog = () => {
	emit('closeDialog');
};

const setupHeaderButtons = () => {
	const headerButtons = [
		{
			text: BUTTON_TEXTS.SUBMIT,
			type: 'primary',
			onClick: onSave,
			visible: true,
		},
		{
			text: BUTTON_TEXTS.CLOSE,
			type: 'default',
			onClick: onClose,
			visible: true,
		},
	];
	emit('updateHeaderButtons', headerButtons);
};
</script>

<style lang="scss" scoped>
.subsidy-rule {
	.create-form {
		border-radius: 8px;
		border: 1px solid var(--el-border-color-light);
	}

	.form-section {
		margin-bottom: 30px;

		.section-title {
			display: flex;
			align-items: center;
			gap: 8px;
			margin-bottom: 20px;
			padding-bottom: 10px;
			border-bottom: 1px solid var(--el-border-color-extra-light);
			color: var(--el-text-color-primary);
			font-size: 16px;
			font-weight: 600;

			i {
				color: var(--el-color-primary);
				font-size: 18px;
			}
		}
	}

	// 只读公式输入框样式
	.formula-input-readonly {
		cursor: pointer;

		:deep(.el-input__inner) {
			cursor: pointer;
			background-color: var(--el-fill-color-light);
			border: 1px solid var(--el-border-color);

			&:hover {
				background-color: var(--el-fill-color);
				border-color: var(--el-color-primary);
			}

			&:focus {
				border-color: var(--el-color-primary);
				box-shadow: 0 0 0 2px var(--el-color-primary-light-8);
			}
		}
	}

	// 内联表单项样式
	.inline-form-item {
		margin-bottom: 0 !important;

		:deep(.el-form-item__label) {
			display: none;
		}

		:deep(.el-form-item__content) {
			line-height: normal;
		}

		:deep(.el-form-item__error) {
			position: absolute;
			top: 100%;
			left: 0;
			z-index: 10;
			font-size: 12px;
			white-space: nowrap;
		}
	}
}

// 暗黑模式适配
[data-theme='dark'] {
	.subsidy-rule {
		.create-form {
			background: var(--next-color-primary) !important;
			border-color: var(--next-border-color) !important;
		}

		.form-section .section-title {
			border-bottom-color: var(--next-border-color) !important;
			color: var(--next-color-bar) !important;
		}
	}
}

// 响应式设计
@media (max-width: 768px) {
	.subsidy-rule {
		.form-section {
			margin-bottom: 25px;

			.section-title {
				font-size: 15px;
				margin-bottom: 15px;
			}
		}
	}
}

@media (max-width: 480px) {
	.subsidy-rule {
		.form-section {
			margin-bottom: 20px;

			.section-title {
				font-size: 14px;
				margin-bottom: 12px;
			}
		}
	}
}
</style>
